<template>
  <div class="interview">

    <div style=" margin-top: 20px; display: flex;padding: 0px 20px;border-bottom: 1px solid #0270c1;background-color: white;width: 95%;margin-left: 12px">
      <div>
        <img src="/src/assets/hy/zhiwei.png" height="30" width="30" style="margin: 5px 10px 0px 0px"/>
      </div>
      <div style="text-align: center;line-height: 40px;">面试管理：</div>
    </div>
    <div class="shouts">
      <div style="margin: 25px 30px;">
        <el-input v-model="sousuo.empName" placeholder="面试负责人" style="width: 160px;margin-right: 20px"/>
        <el-input v-model="sousuo.postName" placeholder="应聘岗位" style="width: 160px;margin-right: 20px"/>
            <el-date-picker
                v-model="sousuo.interDates"
                type="date"
                label="Pick a date"
                placeholder="面试日期"
                style="width: 170px"
            />
        <el-button @click="sousuo2()" type="primary" style="margin-left: 20px">搜索</el-button>
        <el-button  @click="qingkong()" plain style="margin-left: 20px">重置</el-button>
        <div style="float: right;margin: 0px 5px">
<!--          <el-droodown-item>-->
<!--            <router-link :to="{path:'/Recruitment/interview/InterviewArrangementProcess'}" event="mouseover">-->
<!--              <el-button type="primary">面试申请</el-button>-->
<!--            </router-link>-->
<!--          </el-droodown-item>-->
          <el-dropdown style="margin-left: 20px">
            <el-button type="primary">
              更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item><span @click="dialogFormVisible = true">修改</span></el-dropdown-item>
                <el-dropdown-item><span>删除</span></el-dropdown-item>
                <el-dropdown-item><span>导入</span></el-dropdown-item>
                <el-dropdown-item><span>导出</span></el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div style="width: 100%;">
      <el-table
          ref="multipleTableRef"
          :data="d.tableData"
            style="width: 98%;height: 445px;margin: auto"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="{background:'#f5f7fa'}"
      >
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column align="center" label="候选人姓名" width="120" >
          <template #default="scope">
            <el-button  @click="jinDetails(scope.row)">
              {{ scope.row.talentpool.talentsName}}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" property="postsName" label="面试岗位" width="120" />
        <el-table-column align="center" property="employee.empName" label="面试负责人" show-overflow-tooltip />
        <el-table-column align="center" label="面试阶段">
          <template #default="scope">
            <span v-if="scope.row.interStage == 0"> 初试</span>
            <span v-if="scope.row.interStage == 1">终试</span>
          </template>
        </el-table-column>
        <el-table-column align="center" property="interDates" label="安排面试日期"  />
        <el-table-column align="center" property="name" label="安排面试时间">
          <template #default="s">{{ s.row.interStarttime}}至{{s.row.interEndtime}}</template>
        </el-table-column>
        <el-table-column align="center" property="interState" label="面试状态" >
          <template #default="scope">
            <span v-if="scope.row.interState == 0">未面试</span>
            <span v-if="scope.row.interState == 1">面试中</span>
            <span v-if="scope.row.interState == 2">已面试</span>
          </template>
        </el-table-column>
        <el-table-column align="center" property="interResult" label="面试结果" >
          <template #default="scope">
            <span v-if="scope.row.interResult == 0">已通过</span>
            <span v-if="scope.row.interResult == 1">未通过</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="offer" >
          <!--按钮需要使用插槽才能取到当前行的值-->
          <template #default ="s"  >
            <el-button v-if="s.row.interState == 2 && s.row.interResult == 0"  @click="postDept(s.row)" type="success" style="font-size: 10px;width: 60px;height: 30px;">
              发送
            </el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" >
          <!--按钮需要使用插槽才能取到当前行的值-->
          <template #default ="s" >
            <el-button v-if="s.row.interDates > riqi &&  s.row.interWhether == null " @click="" style="font-size: 10px;width: 60px;height: 30px;">
              短信通知
            </el-button>
            <el-button v-if="s.row.interDates == riqi && s.row.interResult == null" @click="jinDetails(s.row)" type="primary" style="font-size: 10px;width: 60px;height: 30px;">
              开始面试
            </el-button>
            <el-button v-if=" s.row.interWhether == 0 && s.row.interResult == 0 " @click="jinDetails(s.row)" type="warning" style="font-size: 10px;width: 60px;height: 30px;">
              安排面试
            </el-button>
            <el-button v-if=" s.row.interDates < riqi && s.row.interWhether == null " @click="jinDetails(s.row)" type="info" style="font-size: 10px;width: 60px;height: 30px;">
              未参加
            </el-button>
            <el-button v-if=" s.row.interResult == 1 " type="info" style="font-size: 10px;width: 60px;height: 30px;">
              已淘汰
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-row justify="center">
          <el-col>
            <el-pagination
                v-model:currentPage="d.pageNo"
                v-model:page-size="d.pageSize"
                :page-sizes="[5,10, 20, 30, 40]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="d.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  Search,
} from '@element-plus/icons-vue'
import {onBeforeMount, reactive, ref} from "vue";
import axios from "axios";
import {useRouter} from "vue-router";
//获取当前时间
import moment from 'moment';
import {ElMessage} from "element-plus";

const d = reactive({
  //table当前展示的数据
  list:null,
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:10,
  //数据
  tableData:[],
})
let riqi = moment(new Date()).format("yyyy-MM-DD")
let shijian = moment(new Date()).format("HH:mm:ss")
//查询出所有的岗位需求数据
const date=()=>{
  axios.post("personnelOa/interview/selectInter")
      .then((res)=>{
        d.tableData =res.data.data;
        console.log(res.data.data)
        ALltableData.value = d.tableData;//放入表格
        d.total = res.data.data.length;//获得它的长度
        // getTabelData();//调用方法
      })
      .catch()
}
const ALltableData=ref([])
const getTabelData=()=>{//分页，这里没必要管一样就行
  let data =JSON.parse(JSON.stringify(ALltableData.value));//把数据转为JSON格式
  let shu = data.splice(
      (d.pageNo - 1) * d.pageSize,
      d.pageSize
  )
  d.tableData = shu ;
}

const handleSizeChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageSize = val ;
  d.pageNo = 1;
  getTabelData();
}

const handleCurrentChange = (val: number) => {//分页，这里没必要管一样就行
  console.log("翻页，当前为第几页", val)
  d.pageNo = val;
  getTabelData();
}
//一进页面就调用
onBeforeMount(()=>{
  date();
})
//搜索数据
const sousuo = reactive({
  //面试负责人
  empName:'',
  //应聘岗位
  postName:'',
  //面试日期
  interDates:'',

})
const qingkong =()=>{
      //面试负责人
     sousuo.empName=''
      //应聘岗位
      sousuo.postName=''
      //面试日期
      sousuo.interDates=''
  date();
}
const sousuo2 =()=>{
  console.log(sousuo)
  // axios.post("personnelOa/interview/sousuo",sousuo)
  //     .then((res)=>{
  //       d.tableData =res.data.data;
  //       console.log("fffffffffffffffffffffffffff")
  //       console.log(res.data.data)
  //       ALltableData.value = d.tableData;//放入表格
  //       d.total = res.data.data.length;//获得它的长度
  // })
  axios.post("personnelOa/SysEmployee/empCard/"+sousuo.postName)
      .then((res)=>{
        console.log(res.data.data)
  })
}
const router=useRouter();
//跳转到详情页面
const jinDetails = (row)=>{
  console.log(row.interId)
  router.push({path:"/Recruitment/interview/InterviewDetails",query:{id:row.interId}})
}

const postDept = (row)=>{
  axios.post("personnelOa/SysPost/postDept/"+row.talentpool.talentsPosition)
      .then((res)=>{
        postidDeptid.deptId = res.data.data.deptId
        postidDeptid.postId = res.data.data.postId
        console.log( postidDeptid.deptId )
        editBook(row)
  })
}
const postidDeptid = reactive({
  //部门id
  deptId:'',
  //岗位id
  postId:'',

})
const editBook=(row)=>{
  if (postidDeptid.deptId != null){
    const offer = reactive({
      talentsId:row.talentpool.talentsId,
      offerDepartment:postidDeptid.deptId,
      offerPost:postidDeptid.postId,
      offerSalary:row.interProbationSalary,
      offerFormalsalary:row.interFormalSalary,
      offerProbation:row.interProbation,
      offerDate:row.interTimeArrival,
    })
    console.log("hy")
    console.log(offer)
    axios.post("personnelOa/offer/add",offer)
        .then((res)=>{
          router.push({path:"/Recruitment/interview/offer",query:{id:row.talentpool.talentsId}})
        })
  }else {
    ElMessage({
      type: 'success',
      message: '请重新操作！',
    })
  }

}
</script>

<style scoped>
.interview{
  width: 100%;
  height: 100%;
  background: #F1F1F1;
  overflow: hidden;
}
.shouts{
  width:98%;
  height: 80px;
  background: #FFFFFF;
  border: 1px solid #F1F1F1;
  float: right;
  margin: 20px 1% 0px;
}

</style>